<!--
 * @Author: wuyue
 * @Date: 2023-03-01 16:00:28
 * @LastEditTime: 2023-03-13 15:16:06
 * @LastEditors: wuyue
 * @Descripttion: 调出确认
 * @version: 
-->
<template>
  <div>
    <!-- <base-breadcrumb :title="$route.meta.title"> -->
    <div>
      <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" id="base-breadcrumb" style="position: relative">
        <a-spin :spinning="loading">
          <a-card :bordered="false">
            <title-name title="处理"></title-name>
            <a-card :bordered="false">
              <title-name title="计量设备调拨处理"></title-name>
              <a-table :columns="columns" bordered :data-source="tableData" :pagination="false">
                <template slot="equipmentInfo" slot-scope="text, record">
                  <div v-for="(item, index) in record.equipments" :key="item.id">
                    <span style="margin-right: 10px;">{{ index + 1 }}.设备编号：{{ item.mdCode }}</span>|
                    <span style="margin-right: 10px;">规格型号：{{ item.specificationModel }}</span>|
                    <span class="equipment_margin">状态：{{ item.mdStatusName }}</span>
                    <a-button type="link" @click="deletItem(record.equipments, index)"> 移除 </a-button>
                  </div>
                </template>
                <template slot="action" slot-scope="text, record">
                  <a-button type="link" @click="chioseBtn(record)"> 添加设备 </a-button>
                </template>
              </a-table>
              <div class="btn_right">
                  <a-button :loading="loading" :disabled="loading" type="danger" @click="handleAllocate(0)"> 驳回调拨 </a-button>
                  <a-button :loading="loading" :disabled="loading" type="primary" @click="handleAllocate(1)"> 确定处理 </a-button>
              </div>
            </a-card>
          </a-card>
          <!-- 计量设备调拨表单 -->
          <allocate-form :form="form" :editModel="0" :isToDo="true" />
          <equipment-selected v-if="equipmentSelectedVisible" :visible.sync="equipmentSelectedVisible" :form="currentRow" @handelShow="handelShow" @handleClick="handleModalClick" />
        </a-spin>
        <div class="tool-btns page-btn-right-top soliciting-opinions-close">
          <a-button type="primary" @click="handleClose">
            关闭
          </a-button>
        </div>
      </a-form-model>
      </div>
    <!-- </base-breadcrumb> -->
  </div>
</template>
<script>
import allocateForm from '@/views/quality/equipmentManagement/meterageEquipmentAllocate/components/allocateForm'
import equipmentSelected from '@/components/equipmentSelected/index.vue'
import { confirmProcess, rejectProcess, detailsItem} from '@/api/quality/meterageEquipmentAllocate'
import { equipmentStatusArr } from '@/views/quality/equipmentManagement/constant/dictionary'

export default {
  components: {allocateForm, equipmentSelected },
  data() {
    return {
      loading: false,
      equipmentSelectedVisible: false,
      form: { },
      currentRow: null,
      columns: [
        {
          title: '序号',
          width: '65px',
          customRender: (text, row, index) => index + 1
        },
        {
          title: '设备名称',
          dataIndex: 'mdName',
          width: '150px'
        },
        {
          title: '规格型号',
          dataIndex: 'specificationModel',
          width: '150px'
        },
        {
          title: '申请个数',
          dataIndex: 'applyNum',
          width: '100px'
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          width: '300px',
          ellipsis: true,
        },
        {
          title: '设备详情',
          dataIndex: 'equipmentInfo',
          scopedSlots: { customRender: 'equipmentInfo' }
        },
        {
          title: '操作',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      tableData: []
    }
  },
  created() {
    this.loading = true
      detailsItem({
        id: this.$route.query.businessId
      }).then((res) => {
        this.loading = false
        this.form = res.data
        this.tableData = []
        this.form.inventoryList.forEach(item => {
          this.$set(item, 'equipments', [])
          this.tableData.push(item)
        })
      }).catch(() => {
        this.loading = false
      })
  },
  methods: {
    /**
     * @description: 关闭
     * @return {void}
     */
    handleClose() {
      this.$closePage(true)
      // 刷新列表页
      window.postMessage('finish', window.location.origin)
    },
    // 调拨处理
    handleAllocate(val) {
      let url = null
      // 提交表单
      let param = {
        id: this.$route.query.businessId, 
        waitRecordId: this.$route.query.messageId
      }
      if (val) {
        let tag = false
        param.inventoryList = [] 
        this.tableData.forEach(item => {
          if(item.equipments.length){
            tag = true
          }
          param.inventoryList.push({
            id: item.id,
            mdList: item.equipments.map(item => {
              return { id: item.id }
            })   
          })
        })
        if (!tag) {
            this.$message.info('至少添加一条设备信息')
            return
        }
      }
      this.loading = true
      url = val ? confirmProcess : rejectProcess
      url(param)
        .then((res) => {
          this.loading = false
          if (res.code === '0' || res.data.code === '0') {
            const msg = val ? '处理成功！' : '驳回成功！'
            this.$message.success(msg)
            this.handleClose()
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 当关闭弹窗时，同步equipmentSelectedVisible的值
    handelShow(e) {
      this.equipmentSelectedVisible = e
    },
    // 打开选择设备的弹出框
    chioseBtn(row) {
      this.currentRow = row
      this.currentRow.mdInfoName = row.mdName
      this.currentRow.mdModelName = row.specificationModel
      this.currentRow.projectId = this.form.transferInUnit
      this.equipmentSelectedVisible = true
    },
    // 获取所选中的数据
    handleModalClick(data) {
      data.rows.forEach(rowItem => {
        if (
          !this.currentRow.equipments.find(item => {
            return rowItem.id === item.id
          })
        ) {
          rowItem.mdStatusName = equipmentStatusArr.find(item => item.value === rowItem.mdStatus)?.label
          this.currentRow.equipments.push(rowItem)
        }
      })
    },
    // 移除设备
    deletItem(arr, index) {
      arr.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.btn_right {
  text-align: right;
  margin-top: 10px;
  .ant-btn{
    margin-right: 10px;
  }
}
</style>